blob: b74193cf3bc2c3bf346de182c7c3cef1f1d4463f (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
<script>
import { tick } from 'svelte';
import { t } from '$lib/translations';
import { Icon, Qr } from '$comp';
import { Pincode, PincodeInput } from 'svelte-pincode';
import { user } from '$lib/store';
import { put, success, failure } from '$lib/utils';
let settingPin, setting2fa, disabling2fa;
let code = [];
let pin = '';
let token = '';
let tokenInput, pinInput;
$: if (settingPin) pinInput && tick().then(pinInput.focusFirstInput);
$: if (setting2fa || disabling2fa) tokenInput && tick().then(tokenInput.focusFirstInput);
let reset = () => {
token = '';
code = [];
return true;
};
let togglePin = () => (settingPin = !settingPin);
let toggleEnabling = () => reset() && (setting2fa = !setting2fa);
let toggleDisabling = () => reset() && (disabling2fa = !disabling2fa);
$: enable2fa(token);
let enable2fa = async (twoFa) => {
try {
if (setting2fa && token.length === 6) {
await put('/enable2fa', { token });
success('2FA enabled');
$user.twofa = 1;
toggleEnabling();
}
} catch (e) {
failure('Failed to enable 2fa, try again');
}
};
$: disable2fa(token);
let disable2fa = async () => {
try {
if (disabling2fa && token.length === 6) {
await put('/disable2fa', { token });
success('2FA disabled');
$user.twofa = 0;
toggleDisabling();
}
} catch (e) {
failure('Failed to disable 2fa, try again');
}
};
$: otpUri = `otpauth://totp/coinos:${$user.username}?secret=${$user.otpsecret}&period=30&digits=6&algorithm=SHA1&issuer=coinos`;
</script>
<div>
<span class="font-bold mb-1">{$t('user.settings.securityPIN')}</span>
<p class="text-secondary mb-1">
{$t('user.settings.securityPINDescription')}
</p>
{#if settingPin}
<div class="flex my-4">
<div class="mx-auto">
<Pincode bind:code bind:value={$user.pin} bind:this={pinInput}>
<PincodeInput />
<PincodeInput />
<PincodeInput />
<PincodeInput />
<PincodeInput />
<PincodeInput />
</Pincode>
</div>
</div>
{:else}
<button type="button" class="primary" on:click={togglePin}
><Icon icon="lock" style="mr-1" /> {$t('user.settings.setPIN')}</button
>
{/if}
</div>
<!-- TODO -->
<div>
<label for="auto-lock" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
<p class="text-secondary mb-1">
{$t('user.settings.autoLockDescription')}
</p>
<select name="auto-lock" class="select-styles block py-3 w-full">
<option value="5">5 min</option>
<option value="10">10 min</option>
<option value="30">30 min</option>
<option value="60">1 h</option>
<option value="480">8 h</option>
</select>
</div>
<div>
<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
<p class="text-secondary mb-4">
{$t('user.settings.twofaDescription')}
</p>
{#if setting2fa}
<a href={otpUri}>
<Qr text={otpUri} />
</a>
<div class="text-center my-4">
{$t('user.settings.accountId')}<br />
<b>{$user.otpsecret}</b>
</div>
<div class="text-center my-4">
{$t('user.settings.oneTimeCode')}<br />
<Pincode bind:code bind:value={token} bind:this={tokenInput}>
<PincodeInput />
<PincodeInput />
<PincodeInput />
<PincodeInput />
<PincodeInput />
<PincodeInput />
</Pincode>
</div>
{:else if disabling2fa}
<div class="text-center my-4">
{$t('user.settings.oneTimeCode')}<br />
<Pincode bind:code bind:value={token} bind:this={tokenInput}>
<PincodeInput />
<PincodeInput />
<PincodeInput />
<PincodeInput />
<PincodeInput />
<PincodeInput />
</Pincode>
</div>
{:else if $user.twofa}
<button type="button" class="primary" on:click={toggleDisabling}>
<Icon icon="mobile" style="mr-1" />
{$t('user.settings.twofaDisable')}
</button>
{:else}
<button type="button" class="primary" on:click={toggleEnabling}>
<Icon icon="mobile" style="mr-1" />
{$t('user.settings.twofaSetup')}
</button>
{/if}
</div>
|
